<template>
<div>
  <div class="rightLayout">
    <div class="layoutWrap" data-tpl="addEquipment">
      <div class="layoutTop">
        <div class="layoutTopMain">
          <h2 class="layoutTitle"><span :class="typeImg"></span><span class="typeName">{{layoutTitle}}</span></h2>
          <a href="javascript:;" class="hideLayoutBtn" @click="hideLayout()"><i class="layoutCloseIcon"></i>关闭</a>
        </div>
      </div>
      <div class="layoutMain" style="overflow-x:hidden">
        <component :is="currentView" transition="fade" transition-mode="out-in" keep-alive :apps="apps" :selectTemplate="selectTemplate" @transferCreateHostAction="creatHost" @cancleCreateHost="cancleCreateHost" :devId="devId" :devType="devType"></component>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import templateListComp from './templateList.vue'
import hostComp from './hostInfo.vue'
import graphComp from './graphInfo.vue'
import itemComp from './itemInfo.vue'
import groupComp from './groupInfo.vue'
import createHostComp from './createHost.vue'
import TemplateService from 'api/config/monitortemplate'
import IconsService from 'api/config/iconmanager'
import com from 'common/resTypeEnum'
import {
  RES_ITEM,
  RES_HOST,
  RES_GRAPHY,
  RES_HOSTGROUP
} from 'common/resTypeEnum'

export default {
  name: 'addDevice',
  props: {
    devId: {
      type: String,
      default: function() {
        return '';
      }
    },
    devType: {
      type: Number,
      default: function() {
        return 2;
      }
    },
    devName:{
      type: String,
      default: function() {
        return '';
      }
    }
  },
  data() {
    return {
      apps: [],
      activeName: "tab0",
      currentView: templateListComp,
      selectTemplate: {},
      typeImg:'',
      layoutTitle:''
    }
  },
  /**
   * 监听外部属性变化，加载设计器数据
   * @return {[type]} [description]
   */
  watch: {
    devType(){
      this.changeComp();
    },
    devId(){
      this.layoutTitle = this.devName;
      this.changeComp();
    }
  },
  created(){
    this.queryAllTemplateWithImage();
  },

  mounted() {

  },
  methods: {
    hideLayout() {
      $(".rightLayout").animate({
        left: "100%"
      }).removeClass("showBlock").hide();
      $(".layoutTop").animate({
        left: "100%"
      }).hide();
      $(".layoutWrap").show();
      $("body").removeClass("hideScoll");
    },
    changeComp() {
      switch (this.devType) {
        case RES_HOSTGROUP:
          this.currentView = groupComp;
          break;
        case RES_HOST:
          this.currentView = hostComp;
          break;
        case RES_GRAPHY:
        this.currentView = graphComp;
          break;
        case RES_ITEM:
          this.currentView = itemComp;
          break;
        case -1:
          if(this.devId!=''){
            this.currentView = createHostComp;
          }else{
            this.currentView = templateListComp;
          }
          break;
        default:
          break;
      }
    },
    creatHost(templateData) {
        this.selectTemplate = templateData;
        this.currentView = createHostComp;
    },
    cancleCreateHost(msg) {
      this.$message(msg);
      this.hideLayout();
    },
    getIconName(restypeName) {
      return com.getIconByResTypeName(restypeName);
    },
    queryAllTemplateWithImage(){
      TemplateService.queryAllTemplateWithImage().then(response =>{
          if (response.data!=null ){
            for (var i = 0 ; i < response.data.length; i++){
              var group = response.data[i];
              if (group.templates !=null && group.templates.length>0){

                for (var j=0 ; j <group.templates.length ; j++){
                  var item = group.templates[j] ;
                  if (item.iconData){
                    if (item.iconData.imageformat){
                      item.iconData.image = "data:"+item.iconData.imageformat+";base64,"+item.iconData.image ;
                    } else {
                      item.iconData.image = "data:image/png;base64,"+item.iconData.image;
                    }
                  }
                }

              }
            }

            this.apps = response.data;
          }


      }).catch(err =>{

      });
    },
  },
  components: {
    templateListComp,
    createHostComp,
    graphComp,
    hostComp,
    itemComp  }
}
</script>
